import { useEffect, useState } from 'react';
// import {} from 'umi';
import useStore from '@/context/useStore';
import styles from './teacherPersonCenter.less';
import { Tabs, Form, Input, Button, Radio, Upload, message , Modal } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { observer } from 'mobx-react-lite'
import { upload , PutPass, UpImg } from '@/services';
import axios from 'axios';
const { TabPane } = Tabs;

// 空余
const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 10 },
};
const tailLayout = {
    wrapperCol: { offset: 2, span: 10 },
};

// 上传图片
const teacherPersonCenter: React.FC = (props) => {

    function callback(key: string) {
        console.log(key);
    }

    const onFinish = (values: any) => {
        console.log('Success:', values);
        proFile.PutGetInFo(values)
    };

    // 修改密码
    const onFinishPass = (values: any) => {
        console.log('Success:', values);
        // proFile.PutGetInFo(values)
        if(! values.NewPassword === values.TruePassword  )
        {
            message.error('确认密码与新密码不符')
        }
        else
        {
            console.log('修改去啦！');
            PutPass( values.OldPassword , values.NewPassword )
        }

        if (!values.NewPassword === values.TruePassword) {
            message.error('确认密码与新密码不符')
        }
        else {
            console.log('修改去啦！');
            PutPass(values.OldPassword, values.NewPassword).then((val: { code: number; msg: string; })=>{
                if( val.code == 200 || val.msg == "操作成功" ){
                    message.success('修改成功！')
                }
            })
            .catch((e:any)=>{
                message.error(e.msg)
            })
        }
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };


    const Demo = () => (
        <Tabs defaultActiveKey="1" onChange={callback}>


            <TabPane tab="基本资料" key="1">

                <div className={styles.Right_Form}>
                    <Form
                        labelAlign="left"
                        {...layout}
                        name="basic"
                        initialValues={{ ...proFile.MyInFoFile }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                    >
                        <Form.Item
                            label="账号"
                            name="nickName"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="电话"
                            name="phonenumber"
                            rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="邮箱"
                            name="email"
                            rules={[{ type: 'email', required: true, message: 'Please input your password!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item name="age" label="性别">
                            <Radio.Group>
                                <Radio value="男">男</Radio>
                                <Radio value="女">女</Radio>
                            </Radio.Group>
                        </Form.Item>

                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit">
                                修改
                            </Button>
                        </Form.Item>
                    </Form>
                </div>

            </TabPane>
            <TabPane tab="修改密码" key="2">

                <Form
                    {...layout}
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={onFinishPass}
                    onFinishFailed={onFinishFailed}
                >
                  
                    <Form.Item
                        label="旧密码"
                        name="OldPassword"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item
                        label="新密码"
                        name="NewPassword"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item
                        label="确定密码"
                        name="TreuPassword"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit">
                            修改
                        </Button>
                    </Form.Item>
                </Form>

            </TabPane>
        </Tabs>
    );

    let { proFile } = useStore();

    useEffect(() => {
        proFile.getInFo();

        console.log(proFile.MyInFoFile);

    }, []);

    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    return <div className={styles.warp}>
        <div className={styles.LeftDiv}>
            <h2>个人信息</h2>
            <div>
                    <img src={`http://111.203.59.61:8060${proFile.MyInFoFile.avatar}`} onClick={showModal} alt="" />

                    <Modal title="修改头像" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                        <input type="file" onChange={(e)=>{
                            let form = new FormData();
                            console.log( '打印初始值' , form);

                            let files = e.target.files;
                            
                            console.log('打印具体值' , files);
                            

                            if(files){
                                for( let i = 0 ; i < files.length ; i ++ ){
                                    form.append('file' , files[i]);
                                }
                                UpImg(form)
                            }
                        }}/>
                    </Modal>
            </div>
            <li><span>用户名称</span> <span>{proFile.MyInFoFile.nickName && proFile.MyInFoFile.nickName}</span></li>
            <li><span>手机号码</span> <span>{proFile.MyInFoFile.phonenumber && proFile.MyInFoFile.phonenumber}</span></li>
            <li><span>用户邮箱</span> <span>{proFile.MyInFoFile.email && proFile.MyInFoFile.email}</span></li>
        </div>

        <div className={styles.RightDiv}>
            <h2>基本资料</h2>
            <Demo />
        </div>
    </div>
}

export default observer(teacherPersonCenter);